<template>
  <div class="page video">
    <!-- 窗口化视频播放 -->
    <video
      class="videoWindow"
      src="http://media.syruptech.cn/1231b28cbbaa4eb895fa939fac1d6302/d6242144b4a448ef843a31e4137f3e40-3c4f7514ef1afcb6b8920052dd47f2d9-fd.mp4"
      poster="../assets/img/videoCover.jpg"
      x5-playsinline="true"
      controls="controls"
      preload="auto"
      webkit-playsinline="true"
      playsinline="true"
      x-webkit-airplay="allow"
      x5-video-player-fullscreen="true"
      x5-video-orientation="portraint"
      type="video/mp4"
    ></video>
    <div
      class="screenMask"
      v-show="videoScreenShow"
    >
      <!-- 全屏播放 -->
      <video
        id="videoScreen"
        class="videoScreen"
        preload
        playsinline="true"
        webkit-playsinline="true"
        x-webkit-airplay="true"
        x5-video-player-type="h5"
        x5-video-player-fullscreen="true"
        x5-video-orientation="portraint"
        src="http://media.syrupad.cn/customerTrans/7cb45aa4417dac7fb5482b900b0cf43b/5fd9e79-16a9c40a977-0005-585f-f3c-3b5b5.mp4"
        type="video/mp4"
      ></video>
      <img
        class="videoBtn skip"
        @click="skip"
        src="./../assets/img/skip.png"
        alt=""
      >
      <img
        class="videoBtn muted"
        @click="muted"
        src="./../assets/img/musicOff.png"
        alt=""
      >
    </div>
    <van-button
      class="videoButton"
      type="info"
      @click="videoScreen"
    >全屏播放</van-button>
    <van-button
      class="default"
      type="primary"
      @click="backHome"
    >回到首页</van-button>
  </div>
</template>

<script>
export default {
  name: 'opening',
  data () {
    return {
      isFrstPlay: false,
      videoScreenShow: false
    }
  },
  methods: {
    videoScreen () {
      this.isFrstPlay = false;
      this.videoScreenShow = true;
      let videoObj = document.getElementById('videoScreen');
      videoObj.currentTime = 0;
      videoObj.play();
      videoObj.muted = false;
    },
    skip () {
      this.$router.replace({ name: 'home' });
    },
    muted () {
      let videoObj = document.getElementById('videoScreen');
      videoObj.muted = true;
    },
    backHome () {
      this.$router.replace({ name: 'home' });
    }
  },
  mounted () {
    let videoObj = document.getElementById('videoScreen');
    /** 
     * 安卓可以预加载视频
     * IOS监听"WeixinJSBridgeReady"事件,提前播放视频再静音
    */
    document.addEventListener("WeixinJSBridgeReady", () => {
      this.isFrstPlay = true;
      videoObj.play();
      videoObj.muted = true;
    }, false);
    /** 
     * 安卓退出全屏监听
    */
    videoObj.addEventListener("x5videoexitfullscreen", () => {
      this.videoScreenShow = false;
    });
  },
  watch: {
  },
  beforeDestroy () {
  }
}
</script>

<style lang="less" scoped>
.video {
  padding: 0;
}
.videoWindow {
  margin: 0.5rem auto 0;
  width: 6.89rem;
  height: 3.88rem;
}
.screenMask {
  z-index: 19890626;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.videoButton {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.default {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.videoBtn {
  z-index: 19911002;
  position: absolute;
  right: 5%;
}
.skip {
  top: 5%;
  width: 0.7rem;
  height: 0.7rem;
}
.muted {
  top: 12%;
  width: 0.6rem;
  height: 0.6rem;
}
</style>

